import React, {useState,useEffect} from 'react';
import { Collapse ,Pagination} from 'antd';
import { Table ,Form ,Button,Dialog,Input,Message,Upload,Cascader} from 'element-react';
import 'element-theme-default';
import axios from 'axios';
import {RightOutlined} from '@ant-design/icons';
import './shoplist.scss'
export default function Shoplist() {
    const { Panel } = Collapse;
    const [flag, setflag] = useState(false);
    const [text, settext] = useState('123');
    const [shoplist, setshoplist] = useState([]);
    const [dialogVisible, setdialogVisible] = useState(false);
    const [form, setfrom] = useState([]);
    const [content, setcontent] = useState([]);
    const [imageUrl, setimageUrl] = useState('');
    const [shopCount, setshopCount] = useState('');
    // const [columns, setcolumns] = useState([]);
    const [category, setcategory] = useState([]);
    useEffect(() => {
       axios.get(`https://elm.cangdu.org/shopping/restaurants?latitude=47.354309&longitude=123.917961&offset=0&limit=20`).then(res=>{
           setshoplist(res.data)
       })
       axios.get('https://elm.cangdu.org/shopping/restaurants/count').then(res=>{
           setshopCount(res.data.count)
       })
       axios.get('https://elm.cangdu.org/shopping/v2/restaurant/category').then(res=>{
         console.log(res.data);
         setcategory(res.data)
       })
    }, [false]);
    var columns= [
        {
          type: 'expand',
          expandPannel: function(data){
            return (
              <Form labelPosition="left" inline={true} className="demo-table-expand">
                <Form.Item label="店铺名称"><span>{data.name}</span></Form.Item>
                <Form.Item label="店铺地址"><span>{data.address}</span></Form.Item>
                <Form.Item label="店铺介绍"><span>{data.description}</span></Form.Item>
                <Form.Item label="店铺 ID"><span>{data.id}</span></Form.Item>
                <Form.Item label="联系电话"><span>{data.phone}</span></Form.Item>
                <Form.Item label="评分"><span>{data.rating}</span></Form.Item>
                <Form.Item label="销售量"><span>{data.recent_order_num}</span></Form.Item>
                <Form.Item label="分类"><span>{data.category}</span></Form.Item>
              </Form>
            )
          }
        },
        {
          label: "店铺名称",
          prop: "name",
          width: 400
        },
        {
          label: "店铺地址",
          prop: "address",
          width: 400
        },
        {
          label: "店铺介绍",
          prop: "description",
          width: 400
        },
        {
          label: "操作",
          prop: '我阿萨',
          render: function(){
            return (
              <span>
               <Button plain={true} onClick={(e)=>bianji(e)} type="detaill" size="small">编辑</Button>
               <Button plain={true} type="add" size="small">添加食品</Button>
               <Button type="delete" size="small">删除</Button>
              </span>
            )
          }
        }
      ]
    function bianji(e) {
        console.log(e)
        setdialogVisible(true)
    }
    function quxiao(params) {
        
    }
    function queding(params) {
        
    }
    function nameChange(params) {
        
    }
    function onSubmit(params) {
        
    }
    function handleAvatarScucess(res, file) {
        setimageUrl( URL.createObjectURL(file.raw) )
    }
    function beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
      
        if (!isJPG) {
          Message('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          Message('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    }
    function onChange(e) {
        console.log(e);
        var a = e*20-20
        axios.get(`https://elm.cangdu.org/shopping/restaurants?latitude=47.354309&longitude=123.917961&offset=${a}&limit=20`).then(res=>{
           console.log(res.data[1]);
           setshoplist(res.data)
       })
    }
    const props= {
      value:'name',
      label: 'name',
      children: 'sub_categories'
    }
    return(
        <div id="shoplist">
            <Table
            style={{width: '100%'}}
            columns={columns}
            data={shoplist}
            border={false}
            onCurrentChange={item=>{setcontent(item);console.log(item)}}
            />
            <Dialog
            title="修改店铺信息"
            size="tiny"
            visible={dialogVisible }
            onCancel={ () =>setdialogVisible(false) }
            lockScroll={ false }
        >
            <Dialog.Body>
            {/* <span>这是一段信息</span> */}
            <Form model={form} labelWidth="80" onSubmit={()=>{onSubmit()}}>
                <Form.Item label="店铺名称">
                    <Input value={content.name} onChange={()=>{nameChange()}}></Input>
                </Form.Item>
                <Form.Item label="详细地址">
                    <Input value={content.address} onChange={()=>{nameChange()}}></Input>
                </Form.Item>
                <Form.Item label="当前城市">
                    <Input value='齐齐哈尔' onChange={()=>{nameChange()}}></Input>
                </Form.Item>
                <Form.Item label="店铺介绍">
                    <Input value={content.description} onChange={()=>{nameChange()}}></Input>
                </Form.Item>
                <Form.Item label="联系电话">
                    <Input value={content.phone} onChange={()=>{nameChange()}}></Input>
                </Form.Item>
                <Form.Item label="店铺分类">
                    <Cascader
                    props={props}
                    options={category}
                    placeholder={content.category}
                    // value={content.category}
                  />
                </Form.Item>
                <Form.Item label="商铺图片">
                    <Upload
                        className="avatar-uploader"
                        action="//jsonplaceholder.typicode.com/posts/"
                        showFileList={false}
                        onSuccess={(res, file) => handleAvatarScucess(res, file)}
                        beforeUpload={file => beforeAvatarUpload(file)}
                        >
                        { content.image_path ? <img src={`//elm.cangdu.org/img/${content.image_path}`} className="avatar" /> : <i className="el-icon-plus avatar-uploader-icon"></i> }
                        </Upload>
                </Form.Item>
                 
            </Form>
            </Dialog.Body>
            <Dialog.Footer className="dialog-footer">
            <Button onClick={ () => quxiao() }>取消</Button>
            <Button type="primary" onClick={ () => queding()}>确定</Button>
            </Dialog.Footer>
        </Dialog>
            共{shopCount}条<Pagination total={shopCount} onChange={onChange}/>
        </div>
    )
}